<template>
  <div class="container">
    <el-table
            :data="form.list"
            stripe
            borde
            max-width="100%">
      <el-table-column
              type="index"
              label="序号"
              width="180">
      </el-table-column>
      <el-table-column
              prop="name"
              label="名称"
              width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column
              v-for="(col,index) in contents"
              :label="col.name" :key="col.prop"
      >
        <!--<span>{{row.index}}</span>-->
        <template slot-scope="scope">
          {{col.prop}}
          {{scope.$index}}
          <span>{{scope.row}}</span>
          <el-select @change="selectfunc(scope.$index,index)" v-model="scope.row.results[index].state">
            <el-option  label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
              prop="description"
              label="描述"
              width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.description"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">添加行</el-button>
    <el-button type="primary" @click="addColoum">添加列</el-button>
    <el-button type="primary" @click.native="conform">确定</el-button>
    <el-select v-model="model">
      <el-option  label="0" value="0"></el-option>
      <el-option label="1" value="1"></el-option>
      <el-option label="2" value="2"></el-option>
    </el-select>
    <el-select v-model="model">
      <el-option  label="0" value="0"></el-option>
      <el-option label="1" value="1"></el-option>
      <el-option label="2" value="2"></el-option>
    </el-select>
    <el-select v-model="model">
      <el-option  label="0" value="0"></el-option>
      <el-option label="1" value="1"></el-option>
      <el-option label="2" value="2"></el-option>
    </el-select>
  </div>

</template>
<script>
  export default {
    name: 'mytable',
    data () {
      return {
        count: '2',
        contents: [
          {
            name: '英语',
            value: '0'
          },
          {
            name: '数学',
            value: '1'
          },
          {
            name: '数学',
            value: '2'
          }
        ],
        form: {
          list: []
        },
        model:''
      }
    },
    created () {
      this.createData()
    },
    methods: {
      createData () {
        var temp = [], t = null ,list_temp = null;
        this.contents.forEach(el => {
          t = {
            id: el.value,
            state:'1'
          };
          // temp.push(JSON.parse(JSON.stringify(t)))
          temp.push({...t})
        });
        list_temp = {
          name: '',
          description: '',
          values:'',
          results: temp.concat()
        };

        for (var i = 0; i < this.count; i++) {
          this.form.list.push(
              {...list_temp}
          )
          // this.$set(this.form.list,i,list_temp);
          // this.$set(this.form,this.form.list[i],list_temp)
        }

        console.log(this.form);

        console.log(this.form.list[0] === this.form.list[1]) //false
        console.log(this.form.list[0].results[0] === this.form.list[1].results[0])//true
        console.log(this.form.list[0].results[0].state===this.form.list[0].results[1].state);
      },
      //动态添加行
      addRow () {
        this.form.list.push({})
      },
      //动态添加列
      addColoum () {

      },
      conform(){
        console.log(this.form);
      },
      selectfunc(scopeIndex,index){
        console.log(scopeIndex,index);
        // this.$set(this.form.list[scopeIndex].results[index],'state','kkk')
      },
      optionforcet(){
        console.log(12);
      }
    }

  }
</script>